<template>
  <div class="quarter-list">
    <div class="quarter-header flex">
      <span style="font-size: 14px" class="flex-wrap-2"
        >当前区域：{{ regionData.title }}</span
      >
      <!-- <span class="flex-wrap-2">湖北省 > 武汉市 > 汉阳区</span> -->
      <!-- <span class="flex-wrap-2 text-right pointer go-back" @click="goBack">返回上级</span> -->
    </div>
    <el-collapse class="coll" v-model="activeNames" @change="handleChange">
      <!-- start -->
      <el-collapse-item
        :name="item.title"
        v-for="(item, index) in regionData['chile']"
        :key="index"
      >
        <!-- top -->
        <template slot="title">
          <div class="flex quarter-slot title-color">
            <span class="flex-wrap-5">{{ item.title }}</span>
            <!-- <span class="flex-wrap-2">{{`${item.province}>${item.city}>${item.district}`}}</span> -->
            <!-- <span class="flex-wrap-2 gray">{{`房源数量: ${item.rentedCount}/${item.totalCount}`}}</span> -->
            <!-- <span
              class="flex-wrap-1 manage-inventory text-right"
              @click.stop="gotoHouseSource(item)"
            >添加子房源</span> -->
          </div>
        </template>
        <!-- body -->
        <div class="quarter-roomlist overflow">
          <el-popover
            v-for="(list, index_list) in item['chile']"
            :key="index_list"
            placement="right"
            width="400"
            trigger="click"
            @show="getDetail(list)"
          >
            <tooltips @refresh="refresh" :data="roomList"></tooltips>
            <div
              slot="reference"
              :class="
                list.leaseStatus == 0
                  ? 'list-room-item pointer left'
                  : 'list-room-item pointer left RENTED'
              "
            >
              <p class="room-apart">
                <span>{{ list.roomName ? list.roomName : "--" }}</span>
              </p>
              <div class="room-user text-right">
                <span>{{ list.memberName ? list.memberName : "--" }}</span>
              </div>
            </div>
          </el-popover>
        </div>
      </el-collapse-item>
      <!-- end -->
    </el-collapse>
  </div>
</template>

<script>
import tooltips from "./tooltips";
import { getRoomList, getDetail } from "@/api/meter/room";
export default {
  name: "quarter-list",
  props: {
    regionData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    name: {
      type: String,
      default: "",
    },
    value: {
      type: Number,
      default: 1,
    },
    goBackHandle: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      activeNames: ["1304256127793205249"],
      list: [],
      roomList: [],
      roomData1: [],
      roomData: {
        1: [
          {
            address: "鹦鹉大道163号附32西北方向65米",
            apartment: {
              area: "",
              bathrooms: "0",
              building: "2",
              communityName: "福星惠誉·汉阳华府",
              coordinate: { Lat: "30.541811", Lon: "114.267994" },
              credentialsType: "",
              credentialsUrl: "",
              decoration: "",
              detailAddress:
                "湖北省武汉市汉阳区鹦鹉大道163号附32西北方向65米福星惠誉·汉阳华府2幢1单元1楼商-101",
              direction: "",
              floor: "1",
              halls: "0",
              isPublic: "false",
              kitchen: "0",
              leasePrice: "",
              rentType: "SINGLEROOM",
              room: "1-商-101",
              rooms: "",
              sourceType: "",
              status: "RENTED",
              type: "CENTRALIZED",
              unit: "1",
            },
            auto_id: 672,
            biz_code: "APARTMENT",
            biz_id: "2020042615410860088",
            city: "武汉市",
            country: "中国",
            device_list: [],
            district: "汉阳区",
            energe: { agreement: "2020042814253710024" },
            gmt_create: "2020-04-26 15:41:08",
            gmt_modified: null,
            independent: "1",
            is_leaf: "1",
            latitude: 30.541811,
            longitude: 114.267994,
            parent_suid: "2020042615410870288",
            province: "湖北省",
            subject_id: "2020042615302111144",
            subject_type: "MERCHANT",
            suid: "2020042615410860088",
            tenant: [
              {
                agreement: "2020051120522590188",
                phone: "13971089665",
                userid: "2020051120522532399",
                username: "李福",
              },
            ],
          },
          {
            address: "鹦鹉大道163号附32西北方向65米",
            apartment: {
              area: "",
              bathrooms: "0",
              building: "2",
              communityName: "福星惠誉·汉阳华府",
              coordinate: { Lat: "30.541811", Lon: "114.267994" },
              credentialsType: "",
              credentialsUrl: "",
              decoration: "",
              detailAddress:
                "湖北省武汉市汉阳区鹦鹉大道163号附32西北方向65米福星惠誉·汉阳华府2幢1单元1楼商-101",
              direction: "",
              floor: "1",
              halls: "0",
              isPublic: "false",
              kitchen: "0",
              leasePrice: "",
              rentType: "SINGLEROOM",
              room: "1-商-101",
              rooms: "",
              sourceType: "",
              status: "VACANT",
              type: "CENTRALIZED",
              unit: "1",
            },
            auto_id: 672,
            biz_code: "APARTMENT",
            biz_id: "2020042615410860088",
            city: "武汉市",
            country: "中国",
            device_list: [],
            district: "汉阳区",
            energe: { agreement: "2020042814253710024" },
            gmt_create: "2020-04-26 15:41:08",
            gmt_modified: null,
            independent: "1",
            is_leaf: "1",
            latitude: 30.541811,
            longitude: 114.267994,
            parent_suid: "2020042615410870288",
            province: "湖北省",
            subject_id: "2020042615302111144",
            subject_type: "MERCHANT",
            suid: "2020042615410860088",
            tenant: [
              {
                agreement: "2020051120522590188",
                phone: "13971089665",
                userid: "2020051120522532399",
                username: "陈茜",
              },
            ],
          },
        ],
        2: [
          {
            address: "鹦鹉大道163号附32西北方向65米",
            apartment: {
              area: "",
              bathrooms: "0",
              building: "2",
              communityName: "福星惠誉·汉阳华府",
              coordinate: { Lat: "30.541811", Lon: "114.267994" },
              credentialsType: "",
              credentialsUrl: "",
              decoration: "",
              detailAddress:
                "湖北省武汉市汉阳区鹦鹉大道163号附32西北方向65米福星惠誉·汉阳华府2幢1单元1楼商-101",
              direction: "",
              floor: "1",
              halls: "0",
              isPublic: "false",
              kitchen: "0",
              leasePrice: "",
              rentType: "SINGLEROOM",
              room: "1-商-101",
              rooms: "",
              sourceType: "",
              status: "RENTED",
              type: "CENTRALIZED",
              unit: "1",
            },
            auto_id: 672,
            biz_code: "APARTMENT",
            biz_id: "2020042615410860088",
            city: "武汉市",
            country: "中国",
            device_list: [],
            district: "汉阳区",
            energe: { agreement: "2020042814253710024" },
            gmt_create: "2020-04-26 15:41:08",
            gmt_modified: null,
            independent: "1",
            is_leaf: "1",
            latitude: 30.541811,
            longitude: 114.267994,
            parent_suid: "2020042615410870288",
            province: "湖北省",
            subject_id: "2020042615302111144",
            subject_type: "MERCHANT",
            suid: "2020042615410860088",
            tenant: [
              {
                agreement: "2020051120522590188",
                phone: "13971089665",
                userid: "2020051120522532399",
                username: "陈茜",
              },
            ],
          },
          {
            address: "鹦鹉大道163号附32西北方向65米",
            apartment: {
              area: "",
              bathrooms: "0",
              building: "2",
              communityName: "福星惠誉·汉阳华府",
              coordinate: { Lat: "30.541811", Lon: "114.267994" },
              credentialsType: "",
              credentialsUrl: "",
              decoration: "",
              detailAddress:
                "湖北省武汉市汉阳区鹦鹉大道163号附32西北方向65米福星惠誉·汉阳华府2幢1单元1楼商-101",
              direction: "",
              floor: "1",
              halls: "0",
              isPublic: "false",
              kitchen: "0",
              leasePrice: "",
              rentType: "SINGLEROOM",
              room: "1-商-101",
              rooms: "",
              sourceType: "",
              status: "VACANT",
              type: "CENTRALIZED",
              unit: "1",
            },
            auto_id: 672,
            biz_code: "APARTMENT",
            biz_id: "2020042615410860088",
            city: "武汉市",
            country: "中国",
            device_list: [],
            district: "汉阳区",
            energe: { agreement: "2020042814253710024" },
            gmt_create: "2020-04-26 15:41:08",
            gmt_modified: null,
            independent: "1",
            is_leaf: "1",
            latitude: 30.541811,
            longitude: 114.267994,
            parent_suid: "2020042615410870288",
            province: "湖北省",
            subject_id: "2020042615302111144",
            subject_type: "MERCHANT",
            suid: "2020042615410860088",
            tenant: [
              {
                agreement: "2020051120522590188",
                phone: "13971089665",
                userid: "2020051120522532399",
                username: "陈茜",
              },
            ],
          },
        ],
      },
      data: [
        {
          address: "鹦鹉大道163号附32西北方向65米",
          auto_id: 683,
          biz_code: "APARTMENT",
          biz_id: "2020042616252160199",
          city: "武汉市",
          country: "中国",
          district: "汉阳区",
          gmt_create: "2020-04-26 16:25:21",
          gmt_modified: null,
          independent: "1",
          is_leaf: "1",
          latitude: 30.541811,
          longitude: 114.267994,
          name: "福星惠誉·汉阳华府",
          parent_suid: "$",
          province: "湖北省",
          rentedCount: 14,
          subject_id: "2020042615302111144",
          subject_type: "MERCHANT",
          suid: "2020042616252160199",
          totalCount: 16,
        },
        {
          address: "鹦鹉大道163号附32西北方向65米",
          auto_id: 684,
          biz_code: "APARTMENT",
          biz_id: "2020042616252160199",
          city: "武汉市",
          country: "中国",
          district: "汉阳区",
          gmt_create: "2020-04-26 16:25:21",
          gmt_modified: null,
          independent: "1",
          is_leaf: "1",
          latitude: 30.541811,
          longitude: 114.267994,
          name: "福星惠誉·汉阳华府",
          parent_suid: "$",
          province: "湖北省",
          rentedCount: 14,
          subject_id: "2020042615302111144",
          subject_type: "MERCHANT",
          suid: "2020042616252160199",
          totalCount: 16,
        },
      ],
    };
  },
  mounted() {
    if (this.regionData.chile) {
      this.activeNames = [];
      this.regionData.chile.forEach((item) => {
        this.activeNames.push(item.title);
      });
    }
  },
  watch: {
    regionData() {
      if (this.regionData.chile) {
        this.activeNames = [];
        this.regionData.chile.forEach((item) => {
          this.activeNames.push(item.title);
        });
      }
    },
  },
  methods: {
    getDetail(data) {
      getDetail(data.id).then((res) => {
        this.roomList = res.data.data;
      });
    },
    refresh() {
      this.$emit("refresh", true);
    },
    messageCollapseChangeEvent(val) {
      let obj = {
        id: val.id,
        level: val.level,
      };
      getRoomList(obj.id, obj.level).then((res) => {
        this.roomData1 = res.data.data;
      });
    },
    getList() {},
    goBack() {
      this.goBackHandle();
    },
    handleChange(val) {
      console.log("val", val);
      // if (this.list.length <= 0) {
      //   this.list = this.activeNames;
      //   this.getList(this.list[this.length - 1]);
      // } else {
      //   this.list.forEach((item) => {
      //     // if(item)
      //   });
      // }
    },
    gotoHouseSource(item) {
      console.log("gotoHouseSource", item);
      this.$router.push({
        path: "/room/decentralized",
        query: {
          type: 2,
          data: item,
        },
      });
      // this.$router.push({
      //   path: "/room/subhouse",
      // });
    },
  },
  components: {
    tooltips,
  },
};
</script>

<style lang="scss" scoped>
// .quarter-list {
//   /deep/.el-collapse-item__arrow {
//     display: none !important;
//   }
// }

.title-color {
  // background-color: #ccc;
}
.go-back {
  color: #04a568;
}
.quarter-header {
  padding: 10px 0;
  color: #666;
}
.quarter-slot {
  width: 96%;
  .manage-inventory {
    color: #04a568;
  }
  .quarter-icon {
    display: inline-block;
    border: 1px solid #f2af11;
    color: #f2af11;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 10px;
  }
}
.quarter-roomlist {
  .list-room-item {
    width: 144px;
    min-height: 64px;
    border: 1px solid #409eff;
    border-left-width: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    font-size: 14px;
    color: #909399;
    margin: 0 20px 16px 0;
  }
  .RENTED {
    border-color: #04a568;
  }
  .room-apart {
    margin: 0 0 10px;
  }
}
</style>
